<template>
	<view class="ysdetial">
		<view class="shangpinginfo">
			<view class="t1">
				{{contentobj['title']}}
			</view>
			<view class="textms" v-if="contentobj['detail'].length<60">
				{{contentobj['detail']}}
			</view>
			<view class="textms" v-else>
				{{ flag?contentobj['detail']:contentobj['detail'].slice(0,60)+'...'}}
			</view>
			<view class="open" v-if="contentobj['detail'].length>60" @click="flag=!flag">
				{{flag?'收起':'展开查看更多'}}<up-icon :name="flag?'arrow-up':'arrow-down'" color="#0077BE" size="14"
					bold></up-icon>
			</view>
			<view class="jiageline">
				<view class="">
					<span style="font-size: 32rpx;">￥</span>
					<span style="font-size: 48rpx;" v-if="contentobj.price">{{jigaefun(contentobj.price)}}.</span>
					<span style="font-size: 30rpx;" v-if="contentobj.price">{{jigaefun(contentobj.price,'后')}}</span>
				</view>
				<view class="ysj">
					预售价
				</view>
			</view>
		</view>
		<view class="jiange">

		</view>
		<view class="spdetail">
			<view class="biaoti">
				<image src="https://chunchi.oss-cn-beijing.aliyuncs.com/static/wxxxGroup 11588@2x.png" class="biaotiimg" mode="widthFix"></image>
				<view class="title">
					商品详情
				</view>
			</view>
			<view class="xiangqcontent">
				<up-parse :content="contentobj['content']"></up-parse>
			</view>
		</view>
		<view class="" style="height: 196rpx;">
		</view>
		<up-popup :show="show" mode="center" :zoom="false">
			<view class="popuview">
				<image src="https://chunchi.oss-cn-beijing.aliyuncs.com/static/wwxxRectangle 24432@2x.png" class="popuviewback" mode=""></image>
				<view class="titletext">
					是否参与
				</view>
				<view class="inputbox">
					<view class="lable">
						购买数量：
					</view>
					<input type="number" v-model="num" placeholder="请输入购买数量" />
				</view>
				<view class="btnss">
					<view class="btn" @click="show=false">
						取消
					</view>
					<view class="save" @click="qd">
						确定
					</view>
				</view>
			</view>
		</up-popup>
		<up-popup :show="show1" mode="center">
			<view class="zhifusucess">
				<image src="https://chunchi.oss-cn-beijing.aliyuncs.com/static/Frame@2x (9).png" class="closeicon" mode=""
					@click="show1=false" />
				<image src="https://chunchi.oss-cn-beijing.aliyuncs.com/static/Frame@2x(19).png" mode="" class="centernimg"></image>
				<view class="text">
					参与成功
				</view>
				<view class="btn" @click="show1=false">
					确定
				</view>
			</view>
		</up-popup>
		<view class="fixedbox">
			<view class="btm" @click="ljcy">
				<image src="https://chunchi.oss-cn-beijing.aliyuncs.com/static/wwxxRectangle 24368@2x.png" class="btmback" mode=""></image>
				立即参与
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		onLoad,
		onShow,
		onPageScroll,
		onReachBottom
	} from "@dcloudio/uni-app";
	import {
		ysfile,
		canyuys
	} from '@/api/home.js'
	import {
		ref
	} from 'vue'
	const show = ref(false)
	const show1 = ref(false)
	const flag = ref(false)
	const contentobj = ref({})
	const num = ref('')
	onLoad((opt) => {
		init(opt.id)
	})

	function ljcy() {
		num.value = ''
		show.value = true
	}
	async function qd() {
		if (!num.value) {
			uni.showToast({
				title: '请输入购买数量',
				icon: 'none'
			})
			return
		}
		const res = await canyuys({
			gid: contentobj.value.id,
			num: num.value
		})
		if (res.code == 1) {
			show.value = false
			show1.value = true
		} else {
			uni.showToast({
				title: res.msg,
				icon: 'none'
			})
		}
	}
	//
	async function init(id) {
		const res = await ysfile({
			id
		})
		if (res.code == 1) {
			contentobj.value = res.data
		}
	}

	function jigaefun(str1, strr) {
		let number = str1
		let str = number.toString(); // 转换为字符串 "100.00"
		let parts = str.split('.'); // 按小数点分割
		let integerPart = parts[0]; // "100"
		let decimalPart = parts[1] || "00"; // "00"（如果没有小数部分，默认 "00"）
		if (!strr) {
			return integerPart
		} else {
			return decimalPart
		}

	}
</script>

<style lang="scss">
	::v-deep .u-popup__content {
		background-color: rgba(0, 0, 0, 0) !important;
	}

	.zhifusucess {
		width: 610rpx;
		background: linear-gradient(180deg, #FDE9D2 0%, #FFFFFF 27%);
		border-radius: 32rpx 32rpx 32rpx 32rpx;
		overflow: hidden;
		position: relative;
		display: flex;
		flex-direction: column;
		align-items: center;

		.closeicon {
			width: 44rpx;
			height: 44rpx;
			position: absolute;
			right: 24rpx;
			top: 24rpx;
		}

		.centernimg {
			width: 124rpx;
			height: 124rpx;
			margin-top: 108rpx;
		}

		.text {
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 32rpx;
			color: #1D2129;
			margin-top: 20rpx;
		}

		.btn {
			width: 254rpx;
			height: 64rpx;
			text-align: center;
			line-height: 64rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			font-size: 28rpx;
			color: #FFFFFF;
			text-align: center;
			background: linear-gradient(to top, #CD936A 0%, #F5C89D 100%);
			border-radius: 40rpx 40rpx 40rpx 40rpx;
			margin: 60rpx auto;
		}
	}

	.popuview {
		width: 668rpx;
		height: 476rpx;
		border-radius: 32rpx 32rpx 32rpx 32rpx;
		overflow: hidden;
		position: relative;

		.popuviewback {
			width: 668rpx;
			height: 476rpx;
			position: absolute;
			z-index: -1;
		}

		.titletext {
			width: 100%;
			text-align: center;
			font-weight: bold;
			font-size: 36rpx;
			color: #1D2129;
			margin-top: 48rpx;

		}

		.btnss {
			width: 604rpx;
			margin: auto;
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-top: 72rpx;

			.btn {
				width: 284rpx;
				height: 80rpx;
				border-radius: 40rpx 40rpx 40rpx 40rpx;
				border: 2rpx solid #86909C;
				text-align: center;
				line-height: 80rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 28rpx;
				color: #4E5969;
			}

			.save {
				width: 284rpx;
				height: 80rpx;
				background: linear-gradient(to top, #CD936A 0%, #F5C89D 100%);
				border-radius: 40rpx 40rpx 40rpx 40rpx;
				text-align: center;
				line-height: 80rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: bold;
				font-size: 28rpx;
				color: #FFFFFF;
			}
		}

		.inputbox {
			width: 604rpx;
			height: 84rpx;
			background: #F7F8FA;
			border-radius: 16rpx 16rpx 16rpx 16rpx;
			border: 2rpx solid #F7F8FA;
			margin: auto;
			margin-top: 80rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.lable {
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 28rpx;
				color: #1D2129;
				margin-left: 28rpx;
			}

			input {
				font-size: 28rpx;
				margin-right: 32rpx;
				text-align: right;
			}
		}
	}


	.ysdetial {
		width: 100%;
		overflow: hidden;

		.fixedbox {
			width: 100%;
			overflow: hidden;
			position: fixed;
			bottom: 0%;
			background: #FFFFFF;
			box-shadow: 0rpx -4rpx 6rpx 0rpx rgba(0, 0, 0, 0.14);
			display: flex;
			justify-content: center;

			.btm {
				height: 84rpx;
				border-radius: 42rpx;
				text-align: center;
				line-height: 84rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: bold;
				font-size: 32rpx;
				color: #FFFAF5;
				width: 686rpx;
				margin-top: 48rpx;
				margin-bottom: 84rpx;
				position: relative;
				display: flex;
				justify-content: center;
				align-items: center;

				.btmback {
					width: 686rpx;
					height: 84rpx;
					position: absolute;
					z-index: -1;
				}
			}
		}

		.shangpinginfo {
			width: 686rpx;
			overflow: hidden;
			margin: auto;

			.t1 {
				font-family: PingFang SC, PingFang SC;
				font-weight: bold;
				font-size: 32rpx;
				color: #1D2129;
			}

			.open {
				width: 100%;
				text-align: center;
				font-size: 28rpx;
				margin-top: 30rpx;
				color: #0077BE;
				display: flex;
				justify-content: center;
			}

			.textms {
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 28rpx;
				color: #4E5969;
				display: -webkit-box;
				-webkit-box-orient: vertical;
				/* 限制文本为2行 */
				overflow: hidden;
				margin-top: 24rpx;
			}



			.jiageline {
				font-family: PingFang SC, PingFang SC;
				font-weight: bold;
				font-size: 32rpx;
				color: #E85C47;
				margin-top: 38rpx;
				display: flex;
				align-items: center;

				.ysj {
					width: 132rpx;
					height: 42rpx;
					border-radius: 0rpx 21rpx 21rpx 21rpx;
					text-align: center;
					line-height: 42rpx;
					font-weight: 500;
					font-size: 28rpx;
					color: #FFFFFF;
					background: #E85C47;
					margin-left: 14rpx;
				}
			}
		}

		.jiange {
			width: 100%;
			height: 28rpx;
			background: #F7F8FA;
			margin-top: 52rpx;
		}

		.spdetail {
			width: 684rpx;
			margin: auto;
			margin-top: 42rpx;

			.xiangqcontent {
				width: 100%;
				overflow: hidden;
				margin-top: 30rpx;
			}

			.biaoti {
				width: 100%;
				display: flex;
				position: relative;
				justify-content: center;
				align-items: center;
				font-family: PingFang SC, PingFang SC;
				font-weight: bold;
				font-size: 32rpx;
				color: #1D2129;

				.biaotiimg {
					width: 100%;
					position: absolute;
				}
			}
		}
	}
</style>